<template>
  <div class="bulletbox">
    <bullet-box-sensor
      v-if="bulletName==='预警一张图'"
      :bulletDataSensor="bulletDataSensor"
      @closeBullet="closeBulletChange"
    ></bullet-box-sensor>
    <bullect-box-fire
      v-if="bulletName==='火区数据管理'"
      :bulletDataFire="bulletDataFire"
      @closeBullet="closeBulletChange"
    ></bullect-box-fire>
    <bullet-box-mine
      v-if="bulletName==='矿山信息管理'"
      :bulletDataMine="bulletDataMine"
      @closeBullet="closeBulletChange"
    ></bullet-box-mine>
  </div>
</template>

<script>
import BulletBoxSensor from "../BulletBox/infobullet/BulletBoxSensor.vue";
import BullectBoxFire from "../BulletBox/infobullet/BullectBoxFire.vue";
import BulletBoxMine from "../BulletBox/infobullet/BulletBoxMine.vue";
export default {
  props: {
    dataOutPut: Object
  },
  components: {
    BulletBoxSensor,
    BullectBoxFire,
    BulletBoxMine
  },
  // mounted() {
  //   this.handleBulletInfo();
  // },
  // 问题？
  watch: {
    dataOutPut() {
      this.handleBulletInfo();
    }
  },
  data() {
    return {
      bulletName: "",
      bulletDataSensor: {},
      bulletDataFire: {},
      bulletDataMine: {}
    };
  },
  methods: {
    handleBulletInfo() {
      // 如果存在字段sorId
      if (this.dataOutPut.sorId) {
        this.bulletName = "预警一张图";
        this.bulletDataSensor = this.dataOutPut;
        // 如果存在字段fireName
      } else if (this.dataOutPut.fireName) {
        this.bulletName = "火区数据管理";
        this.bulletDataFire = this.dataOutPut;
      } else {
        this.bulletName = "矿山信息管理";
        this.bulletDataMine = this.dataOutPut;
      }
    },
    closeBulletChange() {
      this.$emit("closeBullet");
    }
  }
};
</script>

<style lang="scss" scoped>
.bulletbox {
  width: 100%;
  height: 100%;
}
</style>
